import React from "react"
import { Image } from "react-native"

type TabBarIconProps = {
  color?: string
  name: IconTypes
  focused: boolean
  size?: number
}

const HOME = "home"
const EXPLORE = "explore"
const PROMOS = "promos"
const BRANCHES = "branches"
const QRSCAN = "qr scan"

// get icon when tab is not focused
const getIcon = (name) => {
  switch (name) {
    case HOME:
      return "home"
      break
    case EXPLORE:
      return "explore"
      break
    case PROMOS:
      return "promo"
      break
    case QRSCAN:
      return "scan"
      break
    case BRANCHES:
      return "store_front"
      break
    default:
      break
  }
}

// get icon when tab is  focused
const getIconFocused = (name) => {
  switch (name) {
    case HOME:
      return "home-filled"
      break
    case EXPLORE:
      return "explore-filled"
      break
    case PROMOS:
      return "promo-filled"
      break
    case BRANCHES:
      return "branch-filled"
      break
    case QRSCAN:
      return "scan-filled"
      break
    default:
      break
  }
}

const TabBarIcon = ({ color, name, focused, size = 18 }: TabBarIconProps) => {
  return (
    <Image
      style={{
        width: size,
        height: size,
      }}
      // @ts-ignore
      source={focused ? icons[getIconFocused(name)] : icons[getIcon(name)]}
      resizeMode="contain"
    />
  )
}

export default TabBarIcon
